DOCUMENT RESUME 



ED 453 836 



IR 058 107 



AUTHOR 

TITLE 

PUB DATE 

NOTE 

PUB TYPE 

EDRS PRICE 

DESCRIPTORS 

IDENTIFIERS 



King, David 

How To Teach Basic HTML in One Hour. 

1999-00-00 
15p - 

Reports - Descriptive (141) 

MF01/PC01 Plus Postage. 

Academic Libraries; College Curriculum; Higher Education; 
Librarian Teacher Cooperation; Librarians; *World Wide Web 
*HTML ; Microsoft PowerPoint; University of Southern 
Mississippi; *Web Page Design; Web Pages 



ABSTRACT 



This paper describes how librarians at the University of 
Southern Mississippi teach faculty, staff and students the basics of making a 
World Wide Web home page in a one-hour classroom setting. Following a brief 
description of the background to the class, three distinct parts of the class 
are discussed. Each class begins with a PowerPoint presentation that allows 
the presenter to introduce himself or herself and the topic, and to provide 
basic information that can be repeated during the demonstration part of the 
presentation. The PowerPoint presentation can be divided into four sections: 
Introductory Material, Definition of HTML, Basic HTML Tags, and Explanation 
of HTML Editors. After the PowerPoint presentation is finished, a real-time 
demonstration of basic home page construction is provided. The demonstration 
can be done in at least two ways: a hands-on demonstration where all 
attendees are seated at individual PCs, or a hands-off demonstration where 
the presenter creates a page while attendees watch and ask questions. The 
third part of the class consists of a handout of supplemental information 
given to all class attendees. The handout is divided into three sections: 
Basics, Extras, and For More Help. A sample handout is included in the 
appendix. (AEF) 
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Abstract: 

Describes how librarians at the University of Southern Mississippi teach faculty, 
staff and students the basics of making a World Wide Web home page in a one- 
hour classroom setting. Three distinct parts of the class are discussed: l. A 
PowerPoint presentation is given at the beginning of the class; 2. A hands-on 
demonstration is provided after the PowerPoint presentation; and 3. A handout 
is given to all class attendees. The origins of the class are also discussed. 
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Introduction 

Knowledge of HyperText Markup Language, or HTML, has quickly 
become a very sought-after skill. There are literally hundreds of books devoted to 
learning the ins and outs of HTML, and numerous articles appear every month 
touting the wonders of things like Dynamic HTML, Cascading Style Sheets, or 
JavaScript. Given all this fairly advanced reading, where can one go to learn the 
basics of HTML, and learn those basics in a timely fashion? 

Librarians at the University of Southern Mississippi (the author’s former 
employer) teach faculty, staff and students the basics of making a World Wide 
Web home page, in a one-hour class. This article will provide the background as 
to why this class is provided and describe how the class is structured. 



Background 

In 1995-6, librarians at the University of Southern Mississippi (USM) 
noticed that few computer-intensive seminars, like how to use email, how to use 
USENET newsgroups, and how to create a basic home page, were being ought on 
campus. Also, questions at the reference desk started to focus more on 
technology (i.e., “How do I send an email message?” or “How do I make a home 
page?”). So, the Information Services librarians decided to include classes 
focused on technology in their library instruction program. 



The classes began in August 1996. The basic HTML class was offered four 
times in 1996, twenty-four times in 1997, sixteen times in 1998, and ten times by 
July 1999. The size of the classes usually ranged widely, from one to forty 
attendees. 



Literature Review 

There is an abundance of articles focusing on general teaching techniques, 
and there are numerous articles devoted to basic and advanced HTML. However, 
there are relatively few articles describing the process of teaching others home 
page creation, and even fewer that focus on librarians teaching this skill to others 
in a library instruction setting. 

Probably the most pertinent article I found was by Rebecca Jackson *. 
Jackson explains how she helped train subject specialist librarians at her 
institution to use HTML to create subject specific web pages for their library’s 
web site. She discussed selecting web authoring software, and what topics she 
and a colleague covered during the training session. 

Cochenour and Tusa 2 describe a workshop on the Internet designed 
specifically for serial librarians. Their workshop was given to users with little or 
no experience using Internet browsers, and focused on concepts and functions of 
browsers, Netscape Navigator commands, basic HTML tags, and creating a basic 
home page. 

Kipp 3 describes how she incorporated teaching HTML to students in 
order for those students to create an HTML document for a class project. She first 
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taught her students to use the web to find information, in order to familiarize 
themselves with the web, and then taught them how to publish their documents 
on the web. 



Three Basics 

The HTML Basics class developed at USM was designed to do one thing - 
teach attendees how to create a basic home page. Attendees were from many 
walks of life - college freshmen required to attend library classes for a grade, 
interested professors and staff of the university, and people from the surrounding 
community. 

There are three distinct parts to this class: 

1. PowerPoint presentation 

2. Demonstration of creating a basic homepage 

3. Handout provided to all attendees 

PowerPoint Presentation 



Each class begins with a PowerPoint presentation. This allows the 
presenter to introduce him/herself and the topic, and to provide basic 
information that can be repeated during the demonstration part of the 
presentation. This section lasts about twenty minutes. 

The PowerPoint presentation can be divided into four sections: 

1. Introductory material 

2. Definition of HTML 

3. Basic HTML tags 

4. Explanation of HTML editors 
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Introductory Material 

In the introduction, three things are accomplished. First, the presenter 
gives introductions. Next, the workshop is summarized, so attendees know what 
to expect. Finally, attendees are told where they can get web space to make their 
own web site. This will be different for each institution. At USM, all students, 
faculty and staff who have an email account are also given space in that account 
for a web page. This is similar at many institutions. If attendees can’t get a home 
page through their company of school, they can purchase web space through an 
Internet Service Provider (ISP) like America Online or CompuServe, or they can 
get space through any number of free web space providers if access to the web 
isn’t a problem. 

Definition of HTML 

Next, a definition of HTML is provided. First, the full phrase for the 
acronym “HTML” is given (HyperText Markup Language). Then, a basic 
definition of HTML is provided. This helps give attendees an overall view of what 
HTML really means. 

Basic HTML Tags 

Basic HTML tags are discussed next. First, the beginning section of an 
individual tag is defined and separated into individual components (left bracket, 
name of tag, right bracket). Next, the ending tag is described, and the differences 
between the beginning and ending tags are shown (a forward slash is included in 
the ending tag). Finally, an example of text that is usually placed between the 
beginning and ending tags is shown, and attendees are told that this text is what 
usually appears on the actual home page. Although this part of the presentation 
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seems rather tedious, it’s important for attendees to understand the different 
parts of a tag. 

Basic HTML tags are described next. A definition is given for HTML, 
HEAD, TITLE, and BODY tags. Then, descriptions of basic text tags are given, 
including Bold, Italic, Header, and Paragraph tags. A basic image tag (IMG SRC) 
is also described. 

Last, Anchor tags are described. They are broken into individual 
components in order for the attendee to see where the URL is placed within the 
Anchor tag, and where the text describing the link should be placed. 
Explanation of HTML editors 

Finally, a brief introduction to HTML editors is given. Three types of 
editors are described: Text-based, Interactive text-based, and WYSIWYG style 
editors. The attendees are given examples of each type of editor. If most of the 
attendees have access to an editor, like PICO or Netscape Composer, this is 
mentioned. 



Demonstration 

After the PowerPoint presentation is finished, a real-time demonstration 
of basic home page construction is provided. This helps reinforce the information 
learned during the PowerPoint presentation, and allows attendees to ask 
questions as they might arise. This part lasts about forty minutes, and can last 
longer, if there are lots of questions. 
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The demonstration can be done in at least two ways: it can be a hands-on 
demonstration, where all attendees are seated at individual PCs, or it can be a 
hands-off demonstration, where the presenter creates a page while attendees 
watch and ask questions. 

For the demonstration section of USM’s basic HTML class, a basic HTML 
text editor is used. This is done to provide attendees with the basic building 
blocks to home page construction. This will vary depending on whom the class is 
designed for, and what tools are readily available. At USM, all attendees had easy 
access to text editors, so these were used for the demonstration. 

Hands-On Demonstration 

Complete hands-on demonstrations can be fun, if a computer lab is 
available, and the attendees are fairly familiar with basic computer operation. A 
hands-on demonstration also gives the presenter the ability to either have 
attendees work in real time in their own web space accounts, or work on a sample 
page stored in a computer’s local hard drive. The latter option has some 
advantages: the class isn’t dependent on network connections, and the presenter 
doesn’t have to worry about attendees knowing how to log in to their computer 
accounts. Also, in some instances, attendees might have different types of 
computer accounts that require using different types of HTML editors, which 
would be hard to teach in a cohesive fashion. 

Either way, a complete hands-on demonstration will take longer. More 
questions will be asked, and the presenter will need to allow more time to figure 
out all the odd little quirks that an attendee might accidentally create while 
working on his/her sample home page. The presenter will also need to balance 
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time between the advanced attendee who has started asking questions about 
JavaScript and the slower-to-understand attendee who is struggling to make the 
mouse move correctly. 

Hands-off Demonstration 

In a hands-off demonstration, the presenter does the actual typing of 
HTML code. The attendees can be asked questions about how to build the page, 
like “what’s the first HTML tag that needs to be added?” (HTML tag), or “what 
goes within the HEAD tag?” (TITLE tag). This type of question/answer 
demonstration is fairly successful, because attendees have to review information 
given during the PowerPoint presentation. This is also good for classes where 
only some attendees have easy access to web space, or where space for the class is 
tight. 

Demonstration Content 

The content of the demonstration can be the same for both the hands-on 
and the hands-off types of demonstrations. The presenter should help attendees 
build a skeleton home page, using the four basic tags discussed earlier (HTML, 
HEAD, TITLE, BODY). This helps reinforce the basic building blocks of a home 
page, and helps attendees see the logical flow of a web page. 

The presenter should make sure all attendees can see both the HTML code 
they’re working on and the graphical version of their sample web page. This can 
easily be accomplished by having attendees save their work, then open the HTML 
file using a web browser. Bouncing back and forth between the HTML code and 
the actual web page should be done often, in order for attendees to get a visual 
idea of what specific HTML codes do. For example, the presenter might first type 
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in the skeleton tags, add text in the TITLE tag, and then move to a web browser to 
show where the TITLE tag displays text (in the window bar of most graphical web 
browsers). Next, the presenter can type a paragraph of text, add some basic text 
tags, paragraph tags, and line breaks, and show attendees what those tags change 
on the web page. This process should be continued throughout the 
demonstration. 

Wrap-up Time 

Although the class is designed so attendees can ask questions throughout 
the presentation, make sure to leave room towards the end of the demonstration 
for a question and answer time. This time can be invaluable for answering 
individual questions that arise during the demonstration, and for clearing up 
anything that wasn’t understood the first time around. 

Handout 

A handout was created as a supplement to the information given during 
the class. This handout reinforces everything mentioned in the presentation, and 
provides some extra information, like URLs pointing to free image web sites. 

An example of a handout is included in Appendix l. The handout is broken 
into three sections: Basic, Extras, and For More Help: 

Basic Section: 

- This section introduces the four sets of HTML tags needed in 
any basic web page (HTML, HEAD, TITLE, and BODY tags), 
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and is called the home page Skeleton. HTML for a simple home 
page is given, using only those four basic tags. 

- Basic text commands are also introduced. Six basic text 
commands are described: bold text, italic text, underlined text, 
text Heading 1-6, the Paragraph tag, and a Line Break tag. 

- A description of an Anchor, or link tag, is given. The Anchor tag 
is broken into individual components (beginning tag, text 
between the tags, and ending tag). Horizontal Rule tags are also 
described. 

Extras Section: 

- Scanning and surfing/downloading images is discussed, and the 
Image tag is described. The URL of a free graphics web site is 
given. 

- Directions on how to add a background color or image are 
provided. Two URLs are listed that provide colors and decipher 
their RGB (Red, Green, Blue) codes. 

- Colored text is described last. An example is given of the HTML 
tag extension required to change text colors. 

For More Help: 

Links are provided to web sites devoted to HTML tags and to 
web style guides, like A Beginner’s Guide to HTML 4 and the 
Yale C/AIM WWW Style Manual s. 
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The presenter’s email address or phone number can be provided 
in this section, too - a familiar person to contact with specific 
questions can be a valuable resource. 



Conclusions 

This type of presentation seems to work sell for the basic HTML classes 
offered by USM Libraries. The class really can be finished in about one hour, give 
or take ten minutes - depending mainly on the knowledge and interest level of 
attendees. 

This type of class can be easily expanded. One expansion would be to teach 
attendees how to scan an image into a computer, and then to FTP a file from a PC 
to the attendee’s web space account. Using a Window’s based FTP program, like 
WS-FTP, could easily extend the class twenty or more minutes. Another way to 
extend the class would be to use this model for basic HTML, and then to provide 
a more advanced class that introduced Table, Forms, and basic style 
considerations. 

Basic knowledge in HTML can be a real asset for a wide variety of library 
clients. Since this type of informational class fits in so well in a library 
instruction/technology setting, it behooves instruction librarians to seriously 
consider adding this type of class to their roster. 
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Appendix l: Handout Example 

HTML Basics, or How to Make a Home Page 

Basics: 

Home Page Skeleton: 

Web pages are built using four basic HTML tags as their primary structure, or 
skeleton. These four tags are: 

1. <HTMLx/HTML> This tag tells browsers that the file contains 
HTML-coded information. 

2. <HEADx/HEAD> Identifies the part of a document containing the 
Title tag. 

3. < TITLE x /TITLE > Lists the page’s title, which is usually displayed 
in the title bar at the top of the browser window. The title is also 
displayed in the bookmark lists, and is used in search engines. 

4. <BODYx/BODY> Contains the content of a home page. 

A basic, “skeleton” page can be constructed using only these four tags: 

<HTML> 

<HEAD> 

<TITLE>My Home Page</TITLE> 

</HEAD> 

<BODY> 

Your information goes here. 

</BODY> 

</HTML> 

Text Commands: 

There are six basic tags one can use with text: 

1. <B>Bold Text</B> This makes text bold. 

2. <I>Italic Text</I> This makes text italicized. 

3. <U> Underlined Text</U> This underlines text. 

4. <Hi>Largest Heading (use Hi to H6)</Hi> This tag does a number of 
things. It enlarges text (Hi=largest text; H6=smallest text), it makes 
the text bold, and it places a paragraph space below the text. As the 
tag’s name suggests, it is useful for headings and sub-headings. 

5. <Px/P> This tag creates a paragraph between sections of text. 

6. <BR> This tag creates a line break in the text (no ending tag needed). 

Link Commands: 

To create a hypertext link that points to another page, use the anchor tag. There 
are three parts to an anchor tag: 

1. Beginning tag - includes the URL of the linked page: <A 
HREF=http://the.url.goes.here/ > 

2. Text describing the link 

3. Ending tag: </A> 
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The complete tag looks like this: 

<A HREF=http://the.url.goes.here/>Text describing the link</A> 

Divider Lines: 

To create a divider line, use the Horizontal Rule, or <HR> tag. 

Extras: 

Image Commands: 

There are two ways to include images in a home page: 

1. Scan them: If you know how to use a computer scanner, you can scan 
photographs, original artwork, etc. into a digital format (.jpg or .gif file 
formats). If you decide to use a scanned image on your home page, 
you’ll need to FTP (File Transfer Protocol) the digital image to your 
home page account. 

2. Surf for them: You can also find images while browsing the web. In 
fact, some web sites provide artwork for free that other web page 
developers can use. One example is COOLGraphics.com, at 
http://www.coolgraphics.com/ 

Background Colors and Images; 

To add zest to the background of your home page, use an extension to the 
<BODY> tag: 

1. Add a single color: <BODY BGCOLOR=“f5r64b”> The six letters and 
numbers represent different colors. You can either guess at the colors 
(which can be fun if you have extra time), or you can find a home page 
dedicated to background color codes. So you want to see some color do 
ya? (http://www.Missouri.edu/~c639692/colors.html) provides this 
useful service. 

2. Add a background image: <BODY BACKGROUND =“bgimage.jpg” > 
Add the name and location of the background image file to the 
<BODY > tag, and save the image file in the same place HTML files are 
saved. COOLGraphics.com provides some free background images. 

Colored Text: 

To add color to any text within the home page, use the <FONT> tag, like this: 
<FONT COLOR=“ooffoo”>This text will be green</FONT>This will make the 
text appear green on most computer systems. 

For More Help: 

A Beginner’s Guide to HTML 

(http://www.ncsa.uiuc.edu/General/Internet/WWW/): This resource provides 
an easy-to-use guide to basic HTML commands. 

Yale C/AIM WWW Style Manual (http://info.med.yale.edu/caim/manual/): This 
is a guide to good web page style and design. 
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